import React from "react";
import { useShallow } from "zustand/react/shallow";
import { useGlobalStore } from "@/store/global";
import { Button } from "antd";

const ThemeSetting: React.FC = () => {
  const { headerInverted, setGlobalState } = useGlobalStore(useShallow((state) => ({ setGlobalState: state.setGlobalState, headerInverted: state.headerInverted })));

  const setThemeDrawerVisible = () => {
    setGlobalState({ key: "themeDrawerVisible", value: true });
  };

  return (
    <Button
      type="text"
      size="large"
      className={`${headerInverted ? "[&_.ant-btn-icon]:text-white!" : ""} [&_.ant-btn-icon]:flex [&_.ant-btn-icon]:items-center`}
      icon={<i className="iconfont icon-zhuti"></i>}
      onClick={setThemeDrawerVisible}
    />
  );
};
export default ThemeSetting;
